<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>事件冒泡</title>
        <style type="text/css">
            h3 , p { 
                text-align: center;
            }
            .outer{ 
                margin: 50px auto;
                border: 1px solid blue ;
                width: 300px;
                height: 300px;
                background: #dedede; 
            }
            .middle{ 
                margin: 50px auto;
                border: 1px solid blue ;
                width: 200px;
                height: 200px;
                background: #ffd; 
            }
            .inner{ 
                margin: 50px auto;
                border: 1px solid blue ;
                width: 100px;
                height: 100px;
                background: #99f; 
            }
        </style>
    </head>
    <body>

        <h3>事件冒泡</h3>

        <div class="outer">
            <div class="middle">
                <div class="inner"></div>
            </div>
        </div>

        <p>
            <a href="index.html">返回首页</a>
        </p>

        <script type="text/javascript">

            const phases = {
                '1' : 'CAPTURING_PHASE',
                '2' : 'AT_TARGET',
                '3' : 'BUBBLING_PHASE'
            }
            
            const type = 'click';
            const listener = function(evt){
                let target = evt.target || evt.srcElement ;
                console.log( evt.eventPhase , phases[ evt.eventPhase ] );
                console.log( 'target: ' , target , ' this: ' , this );
            }
            // addEventListener 函数的第三个参数 capture 为 false 表示在事件冒泡阶段处理
            const capture = false ;

            const outer = document.querySelector('.outer');
            outer.addEventListener( type, listener, capture );

            const middle = document.querySelector('.middle');
            middle.addEventListener( type, listener, capture );
            
            const inner = document.querySelector('.inner');
            inner.addEventListener( type, listener, capture );
        </script>

        
    </body>
</html>